<template>
    <div>
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text=" "
          @load="getGoodsList"
        >
          <!-- 热销商品列表 -->
          <div style="background-color:#fff;">
            <van-row gutter="10" style="margin-left:0;margin-right:0;">
              <van-col
                span="12"
                v-for="(Good ,index) in goodsList"
                :key="index"
                class="goods"
              >
                <div class="box_shadow">
                <router-link :to="{ path: `/items/detail/${Good.id}`}">
                  <!-- <img v-show="Good.id == 1081002" :src="hot_tag" style="position:absolute;top:0;left:15px;width:30px;" /> -->
                  <div :style="{backgroundImage:`url(${isNotEmpty(Good.activeUrl) ? Good.activeUrl : Good.picUrl})`}" style="width:100%;height:0px;padding-bottom:100%;overflow:hidden;margin:0;border:0;background-size:100% 100%;">
                  </div>
                  <!-- <img v-show="Good.id == 1081002" :src="bottom_tag" width="100%;" style="position:absolute;bottom:63px;left:0px;" /> -->
                </router-link>
                <span class="goods_name"><img v-if="Good.isFactoryOutlet" :src="factory_outlet_tag" height="14px" style="margin-bottom:-3px;" />{{Good.name}}</span>
                <div style="width:100%;height:38px;">
                  <span class="goods_price" style="color:red;padding-left:6px;">￥{{Good.retailPrice}}</span>
                  <span class="get_price" >到手价</span><br>
                  <span class="couter_price">{{Good.counterPrice == 0?'':'￥'+Good.counterPrice}}</span>
                </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
    </div>
</template>
<script>
import {goodsList} from '@/api/api';
import { Card, List, Row, Col } from 'vant';
import _ from 'lodash';
import hot_tag from '@/assets/images/hot.png';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import bottom_tag from '@/assets/images/bottom_tag.png';


export default {
    name:'sub-list',

    props: {
        category_id: {
          type: [String, Number]
        }
    },

    data() {
        return {
        categoryId: this.category_id,
        goodsList: [],
        page: 0,
        limit: 10,
        loading: false,
        finished: false,
        hot_tag: hot_tag,
        factory_outlet_tag: factory_outlet_tag,
        bottom_tag: bottom_tag,
        };
    },

    created() {
        this.init();
    },

    methods: {
    init() {
      this.page = 0;
      this.goodsList = [];
      this.getGoodsList();
    },
    isNotEmpty(img){
      if(img == undefined || img == null || img == ''){
        return false;
      }else{
        return true;
      }
    },
    getGoodsList() {
      this.page++;
      if(this.page > 1 && this.goodsList.length < this.limit){
        this.page = 1;
        this.loading = false;
        this.finished = true;
        return false;
      }
      goodsList({
        categoryId: this.categoryId,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.goodsList.push(...res.data.data.list);
        this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
      }).catch(e => {
        this.page--;
        this.loading = false;
        this.finished = true;
      })
    },
    itemClick(id) {
        this.$router.push(`/items/detail/${id}`);
        }
    },

    components: {
        [List.name]: List,
        [Card.name]: Card,
        [Row.name]: Row,
        [Col.name]: Col
    }
}
</script>
<style lang="scss" scoped>
.view-router{
    padding-bottom: 0;
} 

.van-list {
  min-height: 83vh;
}
.item_list {
  background-color: #fff;
}
.goods{
  padding:5px;
}
/deep/ .van-list__finished-text {
  height: 1px;
  margin: 20px 70px 20px 70px;
  border: 0.02px solid #e8e8e8;
}

.goods_name {
  padding-left: 6px;
  font-size: 13px;
  height: 25px;
  line-height: 30px;
  font-weight: bold;
  font-family: Arial;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  position: relative;
  color: #323233;
}
.goods_price {
  font-weight: bold;
  padding-left: 6px;
  display: inline-block;
  color: #000;
  height: 14px;
  line-height: 14px;
  text-align: left;
}
.get_price{
  color:red;
  padding:0 4px;
  border:0.2px solid red;
  border-radius:3px;
  font-size:10px;
  display:inline-block;
  margin-left:4px;
  transform: scale(0.8);
  transform-origin: -10px -3px;
}
.couter_price{
  display:inline-block;
  font-size:12px;
  color:#999;
  transform: scale(0.8);
  transform-origin: 10px -25px;
  padding-left:8px;
  text-decoration: line-through;
}
.van-tabs__nav {
  margin: 0;
}
.goods .box_shadow{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;overflow:hidden;position:relative;
}
</style>
